<template>
  <div class="wrapper al-container">
    <div class="header">
      <slot name="header" />
    </div>
    <div class="content">
      <slot name="content" />
    </div>
    <div class="footer">
      <slot name="footer" />
    </div>
    <slot />
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.wrapper .header {
  width: 100%;
  flex: 0 0 auto;
  background-color: #fff;
  box-sizing: border-box;
}

.wrapper .content {
  width: 100%;
  flex: 1;
  overflow: hidden;
  background-color: #fff;
  overflow: auto;
  box-sizing: border-box;
}

.wrapper .footer {
  width: 100%;
  flex: 0 0 100px;
  background-color: #fff;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

</style>
